import { getDictionary, type Locale } from "@/lib/site-content";

export default async function DocsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dictionary = getDictionary(locale as Locale);

  return (
    <div className="page-stack">
      <section className="section-panel hero-tight">
        <div className="section-heading">
          <div className="eyebrow">{dictionary.docs.tag}</div>
          <h1>{dictionary.docs.title}</h1>
          <p>{dictionary.docs.intro}</p>
        </div>
      </section>

      <section className="docs-layout">
        <article className="docs-card">
          <h2>{dictionary.docs.quickStartTitle}</h2>
          <ol className="number-list">
            {dictionary.docs.quickSteps.map((step) => (
              <li key={step.title}>
                <strong>{step.title}</strong>
                <p>{step.description}</p>
                <pre>
                  <code>{step.code}</code>
                </pre>
              </li>
            ))}
          </ol>
        </article>

        <article className="docs-card">
          <h2>{dictionary.docs.envTitle}</h2>
          <div className="docs-table">
            {dictionary.docs.envVars.map((item) => (
              <div className="docs-row" key={item.name}>
                <div>
                  <strong>{item.name}</strong>
                  <span>{item.required}</span>
                </div>
                <p>{item.description}</p>
              </div>
            ))}
          </div>
        </article>
      </section>

      <section className="section-panel">
        <div className="section-heading">
          <div className="eyebrow">{dictionary.docs.skillsTag}</div>
          <h2>{dictionary.docs.skillsTitle}</h2>
        </div>
        <div className="card-grid">
          {dictionary.docs.skills.map((skill) => (
            <article className="feature-card" key={skill.name}>
              <h3>{skill.name}</h3>
              <pre>
                <code>{skill.command}</code>
              </pre>
              <p>{skill.description}</p>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}